<template>
    <div class="ImageLayersSplit">
        <div id="slider"></div>
        <div class="sliderOption">
            <div class="left">
                <span>左侧显示图层</span>
                    <div>
                        <el-checkbox-group
                                v-model="checkOptionLeft" @change="leftChange">
                        <el-checkbox v-for="(item,index) in layerOptionLeft" :key="index" :label="item">
                            {{item.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
            </div>
            <div class="right">
                <span>右侧显示图层</span>
                <el-checkbox-group v-model="checkOptionRight" @change="rightChange">
                    <el-checkbox v-for="(item,index) in layerOptionRight"
                                 :key="index"
                                 :label="item">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ImageLayersSplit",
        //import引入的组件需要注入到对象中才能使用",
        components: {},
        data() {
            //这里存放数据",
            return {
                checkOptionLeft:[],
                checkOptionRight:[],
                layerOptionLeft: [],
                layerOptionRight:[]
            };
        },
        //监听属性 类似于data概念",
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
            Xinit() {
                const _this=this;
                let layers = viewer.imageryLayers;
                // this.layerOptionLeft = layers._layers;
                layers._layers.forEach(function(e,index) {
                    layers._layers[index].splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.
                    if (typeof(e.name)=="undefined"){
                        _this.layerOptionLeft.push({
                            index:index,
                            name:'未命名'
                        })
                    }else {
                        _this.layerOptionLeft.push({
                            index:index,
                            name:e.name
                        })
                    }
                });
                let slider = document.getElementById("slider");
                let cesiumContainer=document.getElementById("cesiumContainer");
                slider.style.height=cesiumContainer.offsetHeight+'px';
                viewer.scene.imagerySplitPosition =
                    slider.offsetLeft / slider.parentElement.offsetWidth;

                let handler = new Cesium.ScreenSpaceEventHandler(slider);
                let moveActive = false;
                function move(movement) {
                    if (!moveActive) {
                        return;
                    }
                    let relativeOffset = movement.endPosition.x;
                    let splitPosition =
                        (slider.offsetLeft + relativeOffset) /
                        slider.parentElement.offsetWidth;
                    slider.style.left = 100.0 * splitPosition + "%";
                    viewer.scene.imagerySplitPosition = splitPosition;
                }

                handler.setInputAction(function () {
                    moveActive = true;
                }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
                handler.setInputAction(function () {
                    moveActive = true;
                }, Cesium.ScreenSpaceEventType.PINCH_START);

                handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

                handler.setInputAction(function () {
                    moveActive = false;
                }, Cesium.ScreenSpaceEventType.LEFT_UP);
                handler.setInputAction(function () {
                    moveActive = false;
                }, Cesium.ScreenSpaceEventType.PINCH_END);
            },
            leftChange(val){
                let layers = window.viewer.imageryLayers;
                    let index= this.layerOptionLeft.indexOf(val[0]);
                    this.layerOptionLeft.splice(index,1);
                    this.layerOptionRight.push(val[0]);
                    this.checkOptionLeft=[];
                    layers._layers[val[0].index].splitDirection = Cesium.ImagerySplitDirection.RIGHT;


            },
            rightChange(val){
                    let layers = window.viewer.imageryLayers;
                    let index= this.layerOptionRight.indexOf(val[0]);
                    this.layerOptionRight.splice(index,1);
                    this.layerOptionLeft.push(val[0]);
                    this.checkOptionRight=[];
                    layers._layers[val[0].index].splitDirection = Cesium.ImagerySplitDirection.LEFT;

            }
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {
        },

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {

        },
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {

        },

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {
            this.Xinit();
        },

        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {

        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {

        },
        //生命周期 - 销毁之前",
        beforeDestroy() {
        },
        destroyed() {

        },
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {

        },
    }

</script>

<style scoped>
    .ImageLayersSplit{
        position: relative;
        width: 100%;
    }
    #slider {
        position: absolute;
        left: 50%;
        top: 0;
        background-color: #d3d3d3;
        width: 5px;
        z-index: 1500;
    }

    #slider:hover {
        cursor: ew-resize;
    }

    .sliderOption {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 400px;
        height: 300px;
        padding: 15px;
        color: #fafafa;
        background-color: rgba(175, 175, 175, 0.3);
        z-index: 1000;
        border-radius: 10px;
        display: flex;
        justify-content: flex-start;
        text-align: left;

    }
    .sliderOption .left{
        width: 50%;
    }
    .sliderOption .right{
        width: 50%;
    }
    .sliderOption .el-checkbox{
        color: #fafafa;
    }

</style>

